<template>
  <div>
    <div class="wrapper" ref="wrapper" >
        <div class="city-list">
            <div class="area">
                <p class="title" >当前城市</p>
                <div class="content">
                    <div class="btn ">
                        {{this.$store.state.city}}
                    </div>
                </div>
            </div>
            <div class="area">
                <p class="title">热门城市</p>
                <div class="content" >
                    <div class="btn" 
                    @click="handleClick(item.name)"
                    v-for="item of hotCities" :key="item.id">
                        {{item.name}}
                    </div>
                </div>
            </div>
            <div class="area"  v-for="(itemlist,index) of cities" :key="index">
                <p class="title" :ref="index">{{index}}</p>
                <div class="item-list" >
                    <div class="item"  @click="handleClick(item.name)" v-for="item of itemlist" :key="item.id">
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "CityList",
  props: ["cities", "hotCities"],
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {});
    });
  },
  computed: {
    letter() {
      return this.$store.state.letter;
    }
  },
  watch: {
    letter() {
      let element = this.$refs[this.letter][0];
      this.scroll.scrollToElement(element);
    }
  },
  methods: {
    handleClick(city) {
      this.$store.commit("changeCity",city)
      this.$router.push("/")
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 1150px;
  overflow: hidden;
  position: relative;
  margin-top: 165px;
}
.title {
  line-height: 60px;
  padding-left: 20px;
  background: #eee;
}
.content {
  padding: 15px 15px;
  display: grid;
  grid-row-gap: 15px;
  text-align: center;
  justify-content: space-around;
  grid-template-columns: 200px 200px 200px;
  .btn {
    width: 200px;
    line-height: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
}
.item-list {
  padding: 20px;
  .item {
    border-bottom: 1px solid#eee;
    line-height: 54px;
  }
}
</style>
